﻿@using TomNet.IMSC.Model.DbModels.NewHouse;
@{
    Layout = null;
    var entity = ViewData["entity"] as Buildings;
}

<!DOCTYPE html>


<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/Css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="~/Content/Css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="~/Content/Css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="~/Content/Css/animate.css" rel="stylesheet">
    <link href="~/Content/Css/style.css?v=4.1.0" rel="stylesheet">
    <title>Mapcoordinate</title>
    <link href="/Content/Css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="~/Content/common.css" rel="stylesheet">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=042aacf4c33c2fb0950701aee1c562de"></script>
    <style>
        .help-block {
            margin-top: 0px !important;
        }

        .form-group {
            margin-bottom: 0px;
            height: 37px;
        }
        #allmap {
            margin-left:0px;
        }
    </style>
</head>
<body>
    <div class="wrapper wrapper-content animated fadeInRight">
        <form class="form-horizontal m-t" id="mainForm">

            <input type="hidden" id="Id" name="Id" value="@entity.Id" />
             
            <div class="col-sm-11">
                <div class="form-group">
                    <label class="col-xs-3 control-label">输入搜索地点：</label>
                    <div class="input-group">
                        <input type="text" id="suggestId" value="" class="form-control"> <span class="input-group-btn">
                            <button type="button" onclick="Sereachmap()" value="搜索" class="btn btn-primary">
                                搜索
                            </button>
                        </span>
                    </div>
                </div>
                <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
            </div>
            <input type="hidden" id="X" name="X" value="@entity.X" />
            <input type="hidden" id="Y" name="Y" value="@entity.Y" />
            <div id="allmap" style="width:790px;height:420px;"></div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group" style="margin-bottom:0px;padding-top:20px">
                        <div class="col-xs-3">

                        </div>
                        <div class="col-xs-9">
                            <button id="submit" class="btn btn-primary pull-right" type="submit">
                                <i class="fa fa-check"></i>&nbsp;提&nbsp;交
                            </button>
                        </div>
                    </div>

                </div>
            </div>
        </form>
    </div>


    <!-- 全局js -->
    <script type="text/javascript" src="~/Scripts/jquery.min.js?v=2.1.4"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js?v=3.3.6"></script>
    <!-- jQuery Validation plugin javascript-->
    <script type="text/javascript" src="~/Scripts/plugins/validate/jquery.validate.min.js"></script>
    <script type="text/javascript" src="~/Scripts/plugins/validate/messages_zh.min.js"></script>
    <script type="text/javascript" src="~/Scripts/Extensions/ExtValidator.js"></script>

    <!-- layer javascript -->
    <script type="text/javascript" src="~/Scripts/plugins/layer/layer.min.js"></script>
    <script src="/Scripts/plugins/iCheck/icheck.min.js"></script>

    <script type="text/javascript">

        var map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(123.43, 41.80), 14);
        map.enableScrollWheelZoom(true);
        //点击地图获取点击的经纬度
        map.addEventListener("click", function (e) {
            map.clearOverlays();
            $("#X").val(e.point.lng);
            $("#Y").val(e.point.lat);
            var point = new BMap.Point(e.point.lng, e.point.lat);
            var marker = new BMap.Marker(point);// 创建标注
            markerold = marker;
            map.addOverlay(marker);             // 将标注添加到地图中
            marker.disableDragging();           // 不可拖拽
        });
        //编辑根据经纬度定位地图所在位置
        if ($("#X").val() != 0 && $("#Y").val() != 0) {
            map.clearOverlays();
            var new_point = new BMap.Point($("#X").val(), $("#Y").val());
            var marker = new BMap.Marker(new_point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            map.panTo(new_point);
        }
        else {
            map.centerAndZoom("沈阳", 12);      // 用城市名设置地图中心点
        }

        //搜索按钮点击事件地图模糊查询
        function Sereachmap() {
            var local = new BMap.LocalSearch(map, {
                renderOptions: { map: map }
            });
            local.search($("#suggestId").val());
        }
        //-------------------------------------------地图关键字提示输入点击搜索-------------------------------------------
        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {
                "input": "suggestId"
            , "location": map
            });

        ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
            var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            $("searchResultPanel").innerHTML = str;
        });

        var myValue;
        ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
            $("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

            setPlace();
        });

        function setPlace() {
            map.clearOverlays();    //清除地图上所有覆盖物
            function myFun() {
                var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                $("#X").val(pp.lng);
                $("#Y").val(pp.lat);
                map.centerAndZoom(pp, 14);
                map.addOverlay(new BMap.Marker(pp));    //添加标注
            }
            var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
            });
            local.search(myValue);
        }
        //-------------------------------------------地图关键字提示输入点击搜索---结束-------------------------------------------

        $(function () {
            var icon = "<i class='fa fa-times-circle'></i> ";
            var validator = $("#mainForm").validate({
                rules: {
                    Name: { required: true, },
                    District: { required: true, }
                },
                messages: {
                    Name: { required: icon + "请输入楼盘名称", },
                    District: { required: icon + "请选择地区", }
                },
                submitHandler: function (form) {
                    $.ajax({
                        url: "/NewHouse/Buildings/EditMapCoordinateAsync",
                        type: "post",
                        dataType: "json",
                        data: $('#mainForm').serialize(),
                        success: function (data) {
                            //Info,Success,Warning,Error
                            var type = data.type;
                            if (type == 1) {
                                layer.msg(data.content, { icon: 6, time: 2000 },
                                    function () {
                                        var index = parent.layer.getFrameIndex(window.name);
                                        parent.layer.close(index);
                                    });

                            } else {
                                layer.msg(data.content, { icon: 5, time: 2000 });
                            }
                        }
                    });
                }
            });
        });
    </script>
</body>

</html>
